<!--
 * @Description: 邀请好友攻略预览弹窗
 * @Author: Li Yujie
 * @Date: 2021/07/21
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2021/07/21
-->
<template>
    <section class="wrapper">
        <el-dialog
            :visible.sync="dialogVisible"
            :show-close="false"
            width="375px"
        >
            <div
                class="close-btn"
                @click="dialogVisible = false"
            >
                <i class="el-icon-circle-close"/>
            </div>
            <div class="dialog-content">
                <div class="mask"/>
                <div class="content-wrapper">
                    <div class="content__header">
                        {{ title }}
                    </div>
                    <div class="content__value">
                        <div
                            v-for="(item,index) in previewData"
                            :key="index"
                            class="rules-type-item"
                        >
                            <!--标题-->
                            <div
                                class="rules-title"
                                v-if="item.type === 1"
                            >
                                {{ item.content }}
                            </div>
                            <!--正文-->
                            <div
                                class="rules-content"
                                v-if="item.type === 2"
                            >
                                {{ item.content }}
                            </div>
                            <!--图片-->
                            <div
                                class="rules-image"
                                v-if="item.type === 3"
                            >
                                <img
                                    :src="item.content"
                                    alt=""
                                >
                            </div>
                        </div>
                    </div>
                    <div class="content__footer">
                        <div class="confirm-button">参与项目</div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </section>
</template>

<script>
export default {
    name: 'InviteTipsPreview',
    props: {
        title: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            dialogVisible: false,
            previewData: [],
        };
    },
    components: {},
    mounted() {},
    methods: {

        /**
         * 展示弹窗
         * @param data
         */
        show(data) {
            this.dialogVisible = true;
            this.previewData = data;
        },
    }
};
</script>

<style scoped lang="less">
.wrapper {
    /deep/ .el-dialog {
        width: 375px;
        height: 667px;
        background: #F5F6F8;
        box-shadow: 0 0 20px 0 rgba(153, 169, 192, 0.2);
        position: relative;

        .close-btn {
            position: absolute;
            right: -20px;
            top: -20px;
            cursor: pointer;
            font-size: 20px;
            color: #fff;
        }

        .el-dialog__header {
            display: none;
        }

        .el-dialog__body {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            padding: 0;
            &::-webkit-scrollbar {
                width: 0;
                height: 0;
            }
            .dialog-content {
                height: 100%;
                display: flex;
                flex-direction: column;
                background: url("https://cdn.zsdx.cn/phaadmin/work-page-bg.png") no-repeat center;
                background-size: cover;
                position: relative;
                .mask {
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.7);
                    position: absolute;
                    left: 0;
                    top: 0;
                }
                .content-wrapper {
                    width: 291px;
                    height: 429px;
                    background: #FFFFFF;
                    border-radius: 8px;
                    overflow-y: auto;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    display: flex;
                    flex-direction: column;
                    .content__header {
                        height: 51px;
                        background: #FFFFFF;
                        border-radius: 8px 8px 0 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 16px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #333333;
                        line-height: 16px;
                        flex-shrink: 0;
                    }
                    .content__value {
                        flex: 1;
                        padding: 0 20px;
                        overflow-y: auto;
                        &::-webkit-scrollbar {
                            width: 0;
                            height: 0;
                        }
                        .rules-type-item {
                            overflow: hidden;
                            .rules-title {
                                font-size: 12px;
                                font-family: PingFangSC-Medium, PingFang SC;
                                font-weight: 500;
                                color: #333333;
                                line-height: 20px;
                                margin-bottom: 4px;
                            }
                            .rules-content {
                                font-size: 12px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #666666;
                                line-height: 20px;
                                margin-bottom: 10px;
                            }
                            .rules-image {
                                img {
                                    width: 100%;
                                    object-fit: cover;
                                    border-radius: 8px;
                                    margin-bottom: 10px;
                                }
                            }
                        }
                    }
                    .content__footer {
                        height: 57px;
                        background: #FFFFFF;
                        border-radius: 0 0 8px 8px;
                        flex-shrink: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        overflow: hidden;
                        .confirm-button {
                            width: 254px;
                            height: 36px;
                            background: #20A0FF;
                            border-radius: 18px;
                            font-size: 14px;
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: #FFFFFF;
                            line-height: 14px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;
                        }
                    }

                }
            }

        }
    }

}
</style>
